<template>
    <div class="container">
        <div v-show="isShow" class="mask">
            <div class="modal">
                <div class="body">
                    <div class="item">
                        <div class="input">
                            <input v-model="proValue" type="text" placeholder="请输入图形验证码" class="input-text">
                        </div>
                        <div class="captcha">
                            <img :src="image" alt="">
                        </div>
                    </div>
                </div>
                <div class="bottom">
                    <div @click="iCancel" class="btn_default">取消</div>
                    <div class="btn_primary">确认</div>
                </div>
            </div>
        </div>
        <div class="header">
            <img @click="toBack" src="" alt="">
        </div>
        <div class="login-form">
            <div class="login-title">登录/注册
                <div class="item">
                    <div class="name">手机号</div>
                    <div class="input">
                        <input v-model="mobile" class="input-text" type="number" placeholder="请输入手机号码">
                        <img src="" alt="">
                    </div>
                </div>
            </div>
        </div>
        <div class="box">
            <div @click="getImage" class="btn-confirm">获取短信验证码</div>
        </div>
        <div class="login-button-box">
            <div @click="toLogin" class="login-password-way">使用密码登录</div>
        </div>
        <div class="protocol">
            <div class="checkbox-circle"></div>
            <div class="protocol-text">勾选同意
                <span class="href">《用户协议》</span>和
                <span class="href">《隐私协议》</span>
            </div>
        </div>
        <div class="login-other-way">
            <div class="socialite-box"></div>
        </div>
        <div class="warner">
            <div class="item-box">
                <div class="item-left">×</div>
                <div class="item-right">请输入图形验证码</div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'register',
    components: {},
    data() {
        return {
            isShow: false,
            image: "",
            key: "",
            mobile: "",
            proValue: "",
        };
},
    computed: {},
    watch: {},
    methods: {
        toLogin:function(){
            this.$router.push({
                path: '/password-login',
            })
        },
        getImage:function(){
            this.isShow = true;
        },
        iCancel:function(){
            this.isShow = false;
        },
        toBack:function(){
            this.$router.go(-1);
        },
        toLogin:function(){
            this.$router.push({
                path: '/login-password',
            })
        },
    },
    async created() {
        let resImg = await this.$request.get("/api/v2/captcha/image");
        this.key = resImg.data.key;
        this.image = resImg.data.img;
    },
    mounted() {},
    beforeCreate() {},
    beforeMount() {},
    beforeUpdate() {},
    updated() {},
    beforeDestroy() {},
    destroyed() {},
    activated() {},
};	
</script>

<style lang="less" scoped>
div.container {
    box-sizing: border-box;
    padding-top: 50px;
    background: #fff;
    position: absolute;
    left: 0;
    top: 0;
    overflow-y: scroll;
    overflow-x: hidden;
    width: 100%;
    height: 100%;
    div.mask {
        position: fixed;
        z-index: 999;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        background: rgba(0,0,0,.5);
        div.modal {
            position: fixed;
            z-index: 999;
            width: 300px;
            height: 168px;
            top: 50%;
            left: 50%;
            margin-top: -84px;
            margin-left: -150px;
            background-color: #fff;
            text-align: center;
            border-radius: 3px;
            overflow: hidden;
            -webkit-animation: window-open .3s;
            animation: window-open .3s;
            div.body {
                padding: 40px 15px;
                font-size: 15px;
                line-height: 1.4;
                color: #999;
                overflow-x: hidden;
                overflow-y: auto;
                div.item {
                    width: 100%;
                    height: 40px;
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    div.input {
                        width: 161px;
                        display: flex;
                        flex-direction: row;
                        justify-content: space-between;
                        box-sizing: border-box;
                        align-items: center;
                        border-bottom: 1px solid #dcdfe6;
                        input.input-text {
                            max-width: 161px;
                            height: 36px;
                            float: left;
                            box-sizing: border-box;
                            outline: none;
                            color: #333;
                            font-size: 16px;
                            border: none;
                        }
                    }
                    div.captcha {
                        width: 90px;
                        height: 36px;
                        padding-top: 0;
                        margin-left: 19px;
                        img {
                            width: 90px;
                            display: inline-block;
                            overflow: hidden;
                            position: relative;
                        }
                    }
                }
            }

            div.bottom {
                position: relative;
                line-height: 48px;
                font-size: 18px;
                display: flex;
                border-top: 1px solid #f5f5f5;
                div.btn_default {
                    display: block;
                    flex: 1;
                    text-decoration: none;
                    -webkit-tap-highlight-color: rgba(0,0,0,0);
                    position: relative;
                    cursor: pointer;
                    color: #000;
                    border-right: 1px solid #f5f5f5;
                }

                div.btn_primary {
                    display: block;
                    flex: 1;
                    text-decoration: none;
                    -webkit-tap-highlight-color: rgba(0,0,0,0);
                    position: relative;
                    cursor: pointer;
                    color: #007aff;
                }
            }
        }
    }
  div.header {
    position: fixed;
    top: 0;
    width: 100%;
    height: 50px;
    background-color: #fff;
    z-index: 100;
    padding-left: 15px;
    padding-right: 15px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    border-bottom: 1px solid #f1f2f6;
    align-items: center;
    img {
        position: absolute;
        left: 15px;
        width: 19px;
        height: 19px;
    }
  }

  div.login-form {
    width: 100%;
    height: auto;
    float: left;
    margin-top: 0;
    background-color: #fff;
    box-sizing: border-box;
    padding: 30px 30px 0 30px;
    display: block;
    div.login-title {
        width: 100%;
        height: 24px;
        font-size: 24px;
        font-weight: 500;
        color: #171923;
        line-height: 24px;
        box-sizing: border-box;
        margin-bottom: 30px;
      div.item {
        width: 100%;
        height: auto;
        float: left;
        box-sizing: border-box;
        padding: 6px 0;
        display: flex;
        border-bottom: 1px solid #f4faff;
        margin-bottom: 50px;
        margin-top: 30px;
        div.name {
            width: auto;
            height: auto;
            font-size: 16px;
            font-weight: 400;
            color: #333;
            line-height: 36px;
            margin-right: 25px;
        }

        div.input {
            flex: 1;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            box-sizing: border-box;
            align-items: center;
          input.input-text {
            max-width: 200px;
            height: 36px;
            float: left;
            box-sizing: border-box;
            outline: none;
            color: #333;
            font-size: 16px;
            border: none;
          }
          img {
            width: 16px;
            height: 16px;
            display: none;
          }
        }
      }
    }
  }

  div.box {
    padding: 15px 30px 0 30px;
    div.btn-confirm {
        width: 100%;
        height: 48px;
        background-color: rgba(60,167,250,.6);
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        font-weight: 500;
        color: #fff;
        cursor: pointer;
    }
  }

  div.login-button-box {
    width: 100%;
    height: auto;
    float: left;
    div.login-password-way {
        display: block;
        width: 100%;
        height: auto;
        margin-top: 30px;
        margin-bottom: 35px;
        text-align: center;
        font-size: 14px;
        font-weight: 400;
        color: #3ca7fa;
    }
  }

  div.protocol {
    display: flex;
    align-items: center;
    width: 100%;
    height: auto;
    float: left;
    box-sizing: border-box;
    padding: 10px 30px;
    color: rgba(0,0,0,.4);
    div.checkbox-circle {
        width: 20px;
        height: 20px;
        box-sizing: border-box;
        border: 1px solid #e5e5e5;
    }

    div.protocol-text {
        font-size: 12px;
        line-height: 12px;
        display: inline-block;
        padding-left: 10px;
      span.href {
        color: #3ca7fa;
        margin-left: 5px;
        margin-right: 5px;
      }
    }
  }

  div.login-other-way {
    width: 100%;
    float: left;
    height: 48px;
    box-sizing: border-box;
    padding-left: 30px;
    padding-right: 30px;
    margin-top: 120px;
    div.socialite-box {
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        width: 100%;
        height: 48px;
        float: left;
        text-align: center;
    }
  }
  .warner{
    position: absolute;
    top: 16px;
    left: 50%;
    margin-left: -100px;
    z-index: 100;
    width: 200px;
    height: 45px;
    background-color: rgb(237, 237, 237);
    border-radius: 5px;
    line-height: 45px;
    animation: window-open .3s;
    .item-box{
        display: flex;
        align-items: center;
        justify-content: center;
        .item-left{
            line-height: 20px;
            text-align: center;
            width: 23px;
            height: 23px;
            background-color: rgb(242, 119, 119);
            border-radius: 50%;
            color: white;
            font-size: 20px;
            font-weight: 600;
            margin-right: 10px;
        }
        .item-right{
            color: gray;
            font-size: 16px;
        }      
    }
  }
}
</style>